<html>

<head>
    <script src="/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-table.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css"/>
</head>
<body>
    <nav class="navbar navbar-static-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Beego Administrator</a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                <li><div class="navbar-header"><a class="navbar-brand" href="#">WELCOME,{{.User}}</a></div></li>
                <li><a href="#">View Site</a></li>
                <li><a href="#">Change PWD</a></li>
                <li><a href="#">Log Out</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Manager <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav> 

    <ol class="breadcrumb">
        <li><a href="/admin/test1">Home</a></li>
        <li class="active">{{.Name}}</li>
    </ol>

    <div class="col-md-12">  
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-offset-1">
                <h3>Select {{.Name}} to Change</h3>
                <!-- <ul class="pager">
                    <li class="previous disabled">Site Administrator</li>
                    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
                </ul> -->
                <br/>
                <div id="toolbar">
                    <button id="remove" class="btn btn-danger" disabled>
                        <i class="glyphicon glyphicon-remove"></i> Delete
                    </button>
                    <button id="add" class="btn btn-success" onclick="Add({{.Name}})">
                        <i class="glyphicon glyphicon-plus"></i> ADD 
                    </button>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <table id="table"
                            data-toolbar="#toolbar"
                            data-search="true"
                            data-show-refresh="true"
                            data-show-toggle="true"
                            data-show-columns="true"
                            data-show-export="true"
                            data-detail-view="true"
                            data-detail-formatter="detailFormatter"
                            data-minimum-count-columns="2"
                            data-show-pagination-switch="true"
                            data-pagination="true"
                            data-id-field="id"
                            data-page-list="[10, 25, 50, 100, ALL]"
                            data-show-footer="false"
                            data-side-pagination="server"
                            data-url="/admin/data?name={{.Name}}"
                            data-response-handler="responseHandler">
                            <!-- <thead>
                                <tr>
                                    <th data-field="id">ID</th>
                                    <th data-field="name">Item Name</th>
                                    <th data-field="price">Item Price</th>
                                </tr>
                            </thead> -->
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var $table = $('#table'),
            $remove = $('#remove'),
            $add= $('#add'),
            selections = [];
        
        function Add(name) {
            window.open("http://"+window.location.host+"/admin/add?name="+name,"new open monitor","height=600,width=1000,top=0,left=200,fullscreen=no,scrollbars=0");
        }

        function Edit(name,id) {
            window.open("http://"+window.location.host+"/admin/edit?name="+name+"&id="+id,"new open monitor","height=600,width=1000,top=0,left=200,fullscreen=no,scrollbars=0");
        }

        $table.bootstrapTable({
            height:getHeight(),
            // height:400,
            columns:eval({{.Col | admincolumns}})
        });

        // function initTable() {
        //     $table.bootstrapTable({
        //         height:getHeight(),
        //         columns:eval({{.Col}})
        //     });
        // };

        function initTable() {
            console.log('ok');
        }

        setTimeout(function () {
            $table.bootstrapTable('resetView');
        }, 200);
        $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
            // save your data, here just save the current page
            selections = getIdSelections();
            // push or splice the selections if you want to save all data selections
        });
        $table.on('expand-row.bs.table', function (e, index, row, $detail) {
            if (index % 2 == 1) {
                $detail.html('Loading from ajax request...');
                $.get('LICENSE', function (res) {
                    $detail.html(res.replace(/\n/g, '<br>'));
                });
            }
        });
        $table.on('all.bs.table', function (e, name, args) {
            console.log(name, args);
        });
        $remove.click(function () {
            var r = confirm("确定删除吗？");
            if (r==true){
                var ids = getIdSelections();
                $.ajax({
                    url:'/admin/delete?name={{.Name}}&ids='+ids.join(),
                    type:'Post',
                    success:function (data) {
                        alert(data);
                        $table.bootstrapTable('remove', {
                            field: 'id',
                            values: ids
                        });
                    }
                })
                $remove.prop('disabled', true);
            }
        });
        $(window).resize(function () {
            $table.bootstrapTable('resetView', {
                height: getHeight()
            });
        });

        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            });
        }
        function responseHandler(res) {
            $.each(res.rows, function (i, row) {
                row.state = $.inArray(row.id, selections) !== -1;
            });
            return res;
        }
        function detailFormatter(index, row) {
            var html = [];
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>');
            });
            return html.join('');
        }
        function operateFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" title="Like">',
                '<i class="glyphicon glyphicon-heart"></i>',
                '</a>  ',
                '<a class="remove" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }
        window.operateEvents = {
            'click .like': function (e, value, row, index) {
                alert('You click like action, row: ' + JSON.stringify(row));
            },
            'click .remove': function (e, value, row, index) {
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
            }
        };
        function totalTextFormatter(data) {
            return 'Total';
        }
        function totalNameFormatter(data) {
            return data.length;
        }
        function totalPriceFormatter(data) {
            var total = 0;
            $.each(data, function (i, row) {
                total += +(row.price.substring(1));
            });
            return '$' + total;
        }
        function getHeight() {
            // return $(window).height() - $('h1').outerHeight(true);
            return $(window).height()/1.4;
        }
        // $(function () {
        //     var scripts = [
        //             // location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js',
        //             // 'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
        //             // 'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
        //             // 'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
        //             // 'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
        //         ],
        //         eachSeries = function (arr, iterator, callback) {
        //             callback = callback || function () {};
        //             if (!arr.length) {
        //                 return callback();
        //             }
        //             var completed = 0;
        //             var iterate = function () {
        //                 iterator(arr[completed], function (err) {
        //                     if (err) {
        //                         callback(err);
        //                         callback = function () {};
        //                     }
        //                     else {
        //                         completed += 1;
        //                         if (completed >= arr.length) {
        //                             callback(null);
        //                         }
        //                         else {
        //                             iterate();
        //                         }
        //                     }
        //                 });
        //             };
        //             iterate();
        //         };
        //     eachSeries(scripts, getScript, initTable);
        // });
        // function getScript(url, callback) {
        //     var head = document.getElementsByTagName('head')[0];
        //     var script = document.createElement('script');
        //     script.src = url;
        //     var done = false;
        //     // Attach handlers for all browsers
        //     script.onload = script.onreadystatechange = function() {
        //         if (!done && (!this.readyState ||
        //                 this.readyState == 'loaded' || this.readyState == 'complete')) {
        //             done = true;
        //             if (callback)
        //                 callback();
        //             // Handle memory leak in IE
        //             script.onload = script.onreadystatechange = null;
        //         }
        //     };
        //     head.appendChild(script);
        //     // We handle everything using the script element injection
        //     return undefined;
        // }
    </script>
</body>
</html>